<template>
  <div class="home" :style="{ marginTop: deviceInfo.statusBarHeight + 'px' }">
    <img alt="Vue logo" src="../assets/logo.png" />
    <div>
      设备品牌：{{ deviceInfo.brand }}<br />
      状态栏高度：{{ deviceInfo.statusBarHeight }}<br />
      <button @click="resetDevice()">清除设备信息</button>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  data() {
    return {
      deviceInfo: localStorage.getItem("deviceInfo")
        ? JSON.parse(localStorage.getItem("deviceInfo"))
        : {},
    };
  },
  methods: {
    resetDevice() {
      this.deviceInfo = {};
      localStorage.setItem("deviceInfo", JSON.stringify(this.deviceInfo));
    },
  },
};
</script>
